Adding a scrolling text box

• make an index link
• provide extra information
• provide reference links to other pages
• create scrolling side menus

<div style="width: 190px;height: 250px;overflow:-moz-scrollbars-vertical;overflow-y:auto;">
<p>
more text here!<br />
more text here!<br />
more text here!<br />
more text here!<br />
more text here!<br />
more text here!<br />
more text here!<br />
more text here!<br />
more text here!<br />
more text here!<br />
more text here!<br />
more text here!<br />
more text here!</p>
</div>

1. Click on the 'embed widget' button and select 'other html'. Paste the code in.
 
2. Where it says 'more text here' is where you will write you own text.
 
3. If you want to create a link with your text - it should look like this type in:

<a href="http://YOUR FULL URL/">Your own text</a></p>
 
just where the first 'more text here' words are - like this

<div style="width: 190px;height: 250px;overflow:-moz-scrollbars-vertical;overflow-y:auto;">
<p>
<a href="http://cooltoolsforschools.wikispaces.com/">Cool Tools For Schools</a></p><br />
more text here!<br />
more text here!<br />
more text here!<br />
more text here!<br />
more text here!<br />
more text here!<br />
more text here!<br />
more text here!<br />
more text here!<br />
more text here!<br />
more text here!<br />
more text here!</p>
</div>
 
4. Change the text box width and height to anything you like to suit your needs.
 
5. Add as many links as you want in your text box - eg

<div style="width: 190px;height: 100px;overflow:-moz-scrollbars-vertical;overflow-y:auto;">
<p>
<a href="http://cooltoolsforschools.wikispaces.com/">Cool Tools For Schools</a></p><br />
<a href="http://bbimathex.wikispaces.com/">Maths Wiki</a></p><br />
<a href="http://talklikeapirate.wikispaces.com/">Talk Like a Pirate</a></p><br />
<a href="http://bucklandsbeach.wikispaces.com/">ICTPD Cluster Wiki</a></p><br />
</p>
</div>
 
This will make a list of links.
 
6. If you want to put a space between the lines, just add <p> between each new link - eg

<div style="width: 190px;height: 100px;overflow:-moz-scrollbars-vertical;overflow-y:auto;">
<p><a href="http://cooltoolsforschools.wikispaces.com/">Cool Tools For Schools</a></p><br />
<p><a href="http://bbimathex.wikispaces.com/">Maths Wiki</a></p><br />
<p><a href="http://talklikeapirate.wikispaces.com/">Talk Like a Pirate</a></p><br />
<p><a href="http://bucklandsbeach.wikispaces.com/">ICTPD Cluster Wiki</a></p><br />
</p>
</div>
 
7. To indent some links - (create sub menu) add this code before each
link that you want to indent (for 2 spaces insert it twice etc)

 
 
so that your code would now look like

<div style="width: 190px;height: 100px;overflow:-moz-scrollbars-vertical;overflow-y:auto;">
<p><a href="http://cooltoolsforschools.wikispaces.com/">Cool Tools For Schools</a></p><br />
<p><a href="http://bbimathex.wikispaces.com/">Maths Wiki</a></p><br />
<p><a href="http://talklikeapirate.wikispaces.com/">Talk Like a Pirate</a></p><br />
<p><a href="http://bucklandsbeach.wikispaces.com/">ICTPD Cluster Wiki</a></p>&nbsp;&nbsp; <br /><a href="http://bucklandsbeach.wikispaces.com/Bucklands+Beach+Intermediate">Inquiry Model</a>
</p>
</div>
 
8. If you want to put a border around the text box then include

border:1px solid blue;
 
just after the width and height pixels. Change the border px to suit and the colour to suit.
 
Our code now could look something like this

<div style="width: 190px;height: 100px;border:2px solid black;overflow:-moz-scrollbars-vertical;overflow-y:auto;">
<p><a href="http://cooltoolsforschools.wikispaces.com/">Cool Tools For Schools</a></p><br />
<p><a href="http://bbimathex.wikispaces.com/">Maths Wiki</a></p><br />
<p><a href="http://talklikeapirate.wikispaces.com/">Talk Like a Pirate</a></p><br />
<p><a href="http://bucklandsbeach.wikispaces.com/">ICTPD Cluster Wiki</a></p>&nbsp;&nbsp;&nbsp;
<a href="http://bucklandsbeach.wikispaces.com/Bucklands+Beach+Intermediate">Inquiry Model</a>
<br />
</div>
 
and when put into the embed widget would look like this